<template>
  <div class="reg">
    <div class="top">
      <router-link to="/login" class="top-login">去登录</router-link>
      <p class="top-reg">请注册</p>
    </div>
    <van-form @submit="onSubmit">
      <van-field
        class="user"
        v-model="username"
        name="username"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '用户名不能为空' }]"
      />
      <van-field
        class="pass"
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '密码不能为空' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >注册</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { userReg } from "../api/reg";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    onSubmit(values) {
      userReg(values)
    },
  },
};
</script>

<style lang="less" scoped>
.reg {
  width: 100vw;
  height: 100vh;
  background: #ccc;
  .user {
    border: 1px solid #000;
    margin-bottom: 5px;
    border-radius: 20px;
  }
  .pass {
    border: 1px solid #000;
    border-radius: 20px;
  }
  .top {
    width: 100vw;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
    background: #ccc;
    .top-reg {
      color: #ff53a7;
    }
    .top-login {
      color: #000;
    }
  }
}
</style>